import {Col, Form, Input, message, Modal, Row, Spin,DatePicker} from "antd";
import React, { useState } from 'react';
import axios from "../../../../../components/service/request";
import Indentaion from "@/components/Indentation";

const EditModal  = ({ isModalVisible, cancelModal, value, reload, baseUir }) => {

  //确认框的加载状态、旋转加载的状态、模块选项的值和模块选项的更新函数 定义初始状态
    const [confirmLoading, setConfirmLoading] = React.useState(false);
    const [spinLoading, setSpinLoading] = React.useState(false);
    const [title, setTitle] = React.useState("新增参观信息");
    const [form] = Form.useForm();
    // const style = {
    //     "resize": "both";
    // }
    

    const { TextArea } = Input;
    React.useEffect(() => {
        if (isModalVisible) {
            setSpinLoading(true)
            if (value) {
                setTitle("新增参观信息")
                form.setFieldsValue({
                    id: value.id,
                    name: value.name,
                    text:value.text,
                    // stime: value.stime,
                    // etime: value.etime,
                });
            }
            setSpinLoading(false)
        }
    }, [form, isModalVisible, value]);

    //编辑时 保存按钮方法
    const handleOk = () => {
        setConfirmLoading(true)
        form.validateFields()
            .then((values) => {
                form.resetFields();
                axios.post(baseUir+"/save", values).then(res => {
                    if (res.code === 200) {
                        message.info(res.msg)
                        cancelModal()
                        reload()
                    }  else {
                        message.info(res.msg)
                    }
                })
            })
        setConfirmLoading(false)
    }
    //编辑时取消按钮方法
    const handleCancel = () => {
        form.resetFields()
        cancelModal()
    }
        // const [values, setValues] = useState("");
      
        // const handleTabKey = (event) => {
        //   if (event.key === "Tab") {
        //     event.preventDefault(); // 阻止默认的Tab键行为
      
        //     const textarea = event.target;
        //     const startPos = textarea.selectionStart;
        //     const endPos = textarea.selectionEnd;
      
        //     // 在首行插入缩进字符（例如四个空格）
        //     const newValue =
        //       value.substring(0, startPos) + "    " + values.substring(endPos);
        //     setValues(newValue);
      
        //     // 重新设置光标位置
        //     textarea.selectionStart = startPos + 4;
        //     textarea.selectionEnd = startPos + 4;
        //   }
        // };
    
    return (
        <Modal title={title}
               visible={isModalVisible}
               onOk={handleOk}
               onCancel={handleCancel}
               okText={'保存'}
               confirmLoading={confirmLoading}
               cancelText={'取消'}
               width={800}   
        >
            <Spin spinning={spinLoading}>
                <Form form={form}
                      labelAlign={'right'}
                      layout={'vertical'}
                >
                    <Form.Item name="id" hidden={true}>
                        <Input/>
                    </Form.Item>
                    <Row gutter={18}>
                        <Col span={12}>
                            <Form.Item name="name" label="名称"
                                rules={[
                                    {
                                        required: true,
                                        message: "必须填写参观名称！"
                                    }
                                ]}>
                                {
                                        <Input/>
                                }
                            </Form.Item>
                        </Col>
                        <Col span={10}>
                          <Form.Item name="stime" label="开始时间">
                                    <DatePicker
                                        style={{ width: '100%' }}
                                        placeholder="请选择"/> 
                          </Form.Item>
                        </Col>
                        <Col span={10}>
                            <Form.Item name="etime" label="结束时间">
                                    <DatePicker
                                        style={{ width: '100%' }}
                                        placeholder="请选择"/> 
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item name="text" label="内容"
                                    rules={[
                                        {
                                            required: true,
                                            message: "必须填写参观内容！"
                                        }
                                    ]}>
                                {   
                                
                                    //  <textarea className="visitmantext"></textarea>               
                                        <textarea name="" id="" cols="112" rows="15"></textarea>                                }
                            </Form.Item>
                        </Col>
                    </Row>                  
                </Form>
            </Spin>

        </Modal>
    );
}

export default EditModal;
